<template>
  <div>
    <el-table :data="userInfo" stripe border empty-text="暂无用户数据" style="width: 100%">
      <el-table-column prop="username" label="用户名" width="180"> </el-table-column>
      <el-table-column prop="id" label="账号" width="180"> </el-table-column>
      <el-table-column prop="password" label="密码" width="180"> </el-table-column>

      <el-table-column label="头像" width="180">
        <template v-slot="{ row }">
          <el-image style="width: 50px; height: 50px; border-radius: 50%" :src="row.avatar"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="add_time" label="注册时间" width="180"> </el-table-column>
      <el-table-column label="搜索历史" width="180">
        <template v-slot="{ row }">
          <span v-if="row.search_history.length === 0">无</span>
          <span v-else v-for="(item, i) in row.search_history" :key="i">{{ item }}{{ i < row.search_history.length - 1 ? '、' : '' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template v-slot="{ row }">
          <el-popconfirm :title="`确定删除用户 ${row.username} 吗?`" @onConfirm="deleteUser(row)">
            <el-button slot="reference" type="danger" size="mini" icon="el-icon-delete"></el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
export default {
  data() {
    return {}
  },
  computed: {
    ...mapState('user', ['userInfo'])
  },
  created() {
    this.getUserInfo()
  },
  methods: {
    ...mapMutations('user', ['getUserInfo']),
    // 删除用户
    async deleteUser(row) {
      const res = await this.$http({ url: '/api/public/v1/admin/deleteuser', data: row, method: 'post' })
      if (res.meta.status !== 200) return this.$message({ message: res.meta.msg, type: 'error' })
      this.$message({ message: res.meta.msg, type: 'success' })
      // 重新获取用户数据
      this.getUserInfo()
    }
  }
}
</script>

<style></style>
